<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>腾讯新闻框</title>
<link href="css/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.ui-widget{
	font-size:12px;
}
#main{
	width:60%;
	margin:0 auto;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	//为输入框绑定自动完成
	$("#title").autocomplete({source:'getNewsByTitle.php'});
	
	//为日期输入框添加日历控件
	var dates = $("#startTime, #endTime").datepicker({
		changeMonth:true,
		changeYear:true,
		showMonthAfterYear:true,
		dateFormat:'yy-mm-dd',
		onSelect:function(selectedDate){
			var option = (this.id=="startTime"? "minDate":"maxDate");
			var instance = $(this).data("datepicker");
			var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
					selectedDate, instance.settings);
			dates.not(this).datepicker("option", option,date);
		}
	});
	
	$("#tabs").tabs({
		event:"mouseover"
	});
	
	var $dialog = $("#loginForm").dialog({
		autoOpen:false,
		modal:false,
		title:"用户登录",
		buttons:{
			"登录":function(){
				$(this).dialog("close");
			}
		}
	});
	$("#login").click(function(){
		$dialog.dialog('open');
	});
});
</script>
</head>
<body>
	<div id="main">
		<div id="userArea">
			<span id="login">登录</span>
			<div id="loginForm">
				<form action="" method="post">
					<p>用户名：<input type="text" name="user" id="user" class="ui-widget-content ui-corner-all" /></p>
					<p>密码：<input type="password" name="pswd" id="pswd" class="ui-widget-content ui-corner-all" /></p>
				</form>
			</div>
		</div>
		<div id="search">
			<ul>
				<li>
					新闻标题：<input type="text" name="title" id="title" />
					<input type="button" value="查找" />
				</li>
				<li>
					开始时间：<input type="text" name="startTime" id="startTime" />
					结束时间：<input type="text" name="endTime" id="endTime" />
					<input type="button" value="查找" />
				</li>
			</ul>
		</div>
		<!-- 选项卡部分，必须以<div><ul><li><a></a></li></ul></div>格式进行编写 -->
		<div id="tabs">
			<ul>
				<li><a href="getNewsByType.php?type=society">新闻</a></li>
				<li><a href="getNewsByType.php?type=economic">财经</a></li>
				<li><a href="getNewsByType.php?type=entertainment">娱乐</a></li>
			</ul>
		</div>
	</div>
</body>
</html>